<template>
  <div class="box">
    <!-- 导航栏 -->
    <van-nav-bar title="商品详情" left-arrow @click-left="go">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <img :src="dateil_list.goodsCoverImg" alt="" class="imgs" />
    <div class="txt">
      <p class="p1">{{ dateil_list.goodsName }}</p>
      <span>免费邮</span>
      <span class="sp1">顺风快递</span>
      <p class="p2">￥{{ dateil_list.sellingPrice }}</p>
      <div class="item_title">
        <div v-for="item in txts" :key="item">{{ item }}</div>
      </div>
      <div class="bigs" v-html="dateil_list.goodsDetailContent"></div>
    </div>
    <!-- 底部 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon
        @click="goCart"
        icon="cart-o"
        text="购物车"
        :badge="num"
      />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button
        @click="goodsAdd"
        type="warning"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { detail, address } from '../../request/api.js'
import { add_goods, goodsList } from '../../request/goods.js'
import { Toast } from 'vant'
export default {
  setup() {
    //   定义数据
    const state = reactive({
      goodsId: '',
      dateil_list: [],
      goods_list: [],
      txts: ['概述', '参数', '安装服务', '常见问题'],
      num: 0,
    })
    // 定义路由
    const router = useRouter()
    const route = useRoute()
    state.goodsId = route.query.goodsId

    // 请求方法
    let Details = async () => {
      let res = await detail(state.goodsId)
      console.log(res)
      state.dateil_list = res.data.data
    }
    // 挂载方法
    onMounted(() => {
      Details()
      GoodsList()
    })
    // 定义事件
    let go = () => {
      router.go(-1)
    }
    let goCart = () => {
      router.push({ path: '/cate', query: {} })
    }
    let goodsAdd = async () => {
      let arr = {
        goodsCount: 1,
        goodsId: state.dateil_list.goodsId,
      }
      console.log(arr)
      let res = await add_goods(arr)
      console.log(res)
      if (res.data.resultCode == 200) {
        Toast.success('添加成功')
        GoodsList()
      } else {
        Toast.fail(res.data.message)
      }
    }
    let GoodsList = async () => {
      let res = await goodsList()
      console.log(95, res)
      if (res.data.resultCode == 200) {
        state.num = res.data.data.length
        state.goods_list = res.data.data
      } else {
        state.num = 0
      }
    }

    return {
      ...toRefs(state),
      onMounted,
      go,
      goCart,
      goodsAdd,
    }
  },
}
</script>

<style lang="scss" scoped>
.imgs {
  width: 100%;
}
.txt {
  padding: 0rem 0.2rem;
  box-sizing: border-box;
  .p1 {
    font-size: 0.48rem;
    color: #333;
  }
  span {
    font-size: 0.37rem;
    padding: 0.2rem 0rem;
    box-sizing: border-box;
    color: #999;
  }
  .p2 {
    font-size: 0.58rem;
    color: #f63515;
  }
  .sp1 {
    margin-left: 0.3rem;
  }
  .item_title {
    display: flex;
    justify-content: space-between;
    div {
      padding: 0.1rem 0rem;
      box-sizing: border-box;
      width: 25%;
      text-align: center;
      font-size: 0.4rem;
      border-right: 1px solid #999;
    }
    :nth-child(4) {
      border-right: none;
    }
  }
}
</style>
